<template>
  <div class="container">
    <header><van-search v-model="value" placeholder="请输入搜索关键词" />
</header>
    <main>
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <LunboCom :Banner="bannerList"></LunboCom>
        <NavCom :navList="navList"></NavCom>
        <SkillCom></SkillCom>
        <van-list
          :immediate-check="false"
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ListCom :ProList="proList"></ListCom>
        </van-list>
      </van-pull-refresh>
    </main>
  </div>
</template>

<script>
import {
  getBanner,
  getSeckillList,
  getMenuList,
  getProList,
} from "@/apis/home";
import ListCom from "./components/ListCom.vue";
import LunboCom from "./components/LunboCom.vue";
import NavCom from "./components/NavCom.vue";
import SkillCom from "./components/SkillCom.vue";

export default {
  data() {
    return {
      KillList: [],
      bannerList: [],
      navList: [],
      proList: [],
      value:"",
      count: 2,
      limitNum: 12,
      loading: false,
      finished: false,
      refreshLoading: false,
      isReactive: false,
    };
  },
  methods: {
    onLoad() {
      if (this.isRefresh) return;
      this.loading = true;
      getProList({ count: this.count, limitNum: this.limitNum })
        .then(({ data: res }) => {
          setTimeout(() => {
            if (res.data.length > 0) {
              this.proList = this.proList.concat(res.data);
              this.count++;
            } else {
              this.finished = true;
            }
            this.loading = false;
          }, 2000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onRefresh() {
      // this.refreshLoading = true;
      // this.count = 1;
      setTimeout(() => {
        getProList({ count: this.count, limitNum: this.limitNum }).then(
          ({ data: res }) => {
            this.proList = res.data;
            this.count++;
            this.refreshLoading = false;
          }
        );
      }, 2000);
      // console.log(1111);
    },
  },
  components: {
    ListCom,
    LunboCom,
    NavCom,
    SkillCom,
    
  },
  created() {
    getSeckillList().then(({ data: res }) => {
      this.KillList = res.data;
    });
    getBanner().then((res) => {
      this.bannerList = res.data.data;
      console.log(this.bannerList);
    });
    getMenuList().then(({ data: res }) => {
      this.navList = res.data;
    });
    getProList({ count: 1, limitNum: this.limitNum }).then(({ data: res }) => {
      this.proList = res.data;
      console.log(this.proList);
    });
   
  },
};
</script>

<style scoped></style>
